<template>
	<view>
		<scroll-view
			scroll-y="true"
			class="scroll"
			:style="{ height: height + 'px' }"
			:scroll-top="screenTop"
		>
			<view class="top pl40">
				<view class="dflex alc">
					<view class="fs30 white fw900">纬五路学校</view>
					<image src="../../pagesA/images/whitebottom.png" class="bottomImg pl10"></image>
				</view>
				<view class="fs50 white fw900 dflex posir mt14">
					<view class="fs32 posia" style="bottom: 6rpx;">￥</view>
					<view class="pl30">899.20</view>
				</view>
			</view>
			<!-- center -->
			<view class="center bannerbox pt40">
				<view class="center-top dflex jcse">
					<view class="left borderbox pl20 pt40" @click="handerRevenue">
						<view class="fs24 gray">营收统计(元)</view>
						<view class="fs32 fw900 colora pt20">15000</view>
					</view>
					<view class="right borderbox pl20 pt40" @click="handerCard">
						<view class="fs24 gray">刷卡销量(杯)</view>
						<view class="fs32 fw900 colora pt20">1500</view>
					</view>
				</view>
				<!-- 订单区域 -->
				<view class="mid mt40 pl30">
					<subtitle title="今日售卖"></subtitle>
					<view class="mt50 pl30 mid-item" v-for="(item, index) in dataList" :key="index">
						<OrderMessage style="margin-bottom: 50rpx;" :data="item"></OrderMessage>
					</view>
				</view>
			</view>
		</scroll-view>
		<tabbar :select="2"></tabbar>
	</view>
</template>

<script>
import tabbar from '@/components/tabbar/tabbar.vue';
import subtitle from '@/components/subtitle/subtitle.vue';
import OrderMessage from '../components/OrderMessage/OrderMessage.vue';
import dataList from '../apply/apply.js';
export default {
	components: {
		tabbar,
		subtitle,
		OrderMessage
	},
	data() {
		return {
			screenTop: 0,
			height: '',
			dataList: [
				{
					id: 1,
					img: '../.././static/milkanmuxi.png',
					name: '安慕希酸奶',
					sold: 100,
					stock: 1900,
					replenishment: 300,
					price: 25.8
				},
				{
					id: 2,
					img: '../.././static/milkanmuxi.png',
					name: '纯牛奶',
					sold: 153,
					stock: 1523,
					replenishment: 200,
					price: 30.8
				},
				{
					id: 3,
					img: '../.././static/milkanmuxi.png',
					name: '蒙牛酸奶',
					sold: 400,
					stock: 1300,
					replenishment: 450,
					price: 35.6
				},
				{
					id: 4,
					img: '../.././static/milkanmuxi.png',
					name: '花花牛酸奶',
					sold: 350,
					stock: 1200,
					replenishment: 320,
					price: 15.9
				},
				{
					id: 5,
					img: '../.././static/milkanmuxi.png',
					name: '巧克力酸奶',
					sold: 90,
					stock: 1000,
					replenishment: 100,
					price: 29.9
				}
			]
		};
	},
	methods: {
		// 跳转到营收统计页面
		handerRevenue() {
			uni.navigateTo({
				url: '/pagesA/revenue/revenue'
			});
		},
		// 跳转到刷卡销量页面
		handerCard() {
			uni.navigateTo({
				url: '/pagesA/paycard/paycard'
			});
		}
	},
	onShow() {
		var that = this;
		uni.getSystemInfo({
			success(res) {
				that.height = res.windowHeight;
				that.screenTop = 0;
				console.log(that.screenTop);
			}
		});
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.top {
	width: 750rpx;
	height: 390rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	overflow: hidden;
	& > view:nth-child(1) {
		margin-top: 118rpx;
		.bottomImg {
			width: 16rpx;
			height: 16rpx;
		}
	}
}
.center {
	width: 750rpx;
	height: 300rpx;
	background: #fff;
	margin-top: -100rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	.center-top {
		.left {
			width: 336rpx;
			height: 194rpx;
			background-image: url('../../pagesA/images/ordernum.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
		.right {
			width: 336rpx;
			height: 194rpx;
			background-image: url('../../pagesA/images/ordermoney.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}
	}
}
.mid-item:last-child {
	padding-bottom: 100rpx;
}
</style>
